<template>
  <div class="task-view">
    <el-card class="box-card">
      <template #header>
        <div class="card-header">
          <h3>My Tasks</h3>
          <div class="actions">
            <el-select
                v-model="statusFilter"
                placeholder="Task Status"
                clearable
                class="filter-select"
                @change="handleFilterChange"
            >
              <el-option label="All" value="" />
              <el-option label="Draft" value="Draft" />
              <el-option label="Midterm" value="Midterm" />
              <el-option label="Final" value="Final" />
            </el-select>

            <el-input
                v-model="searchQuery"
                placeholder="Search Tasks"
                prefix-icon="el-icon-search"
                clearable
                class="search-input"
                @input="handleSearch"
            />
          </div>
        </div>
      </template>

      <el-table
          :data="filteredTasks"
          border
          style="width: 100%"
          v-loading="loading"
      >
        <el-table-column prop="title" label="Task Title" min-width="200" />
        <el-table-column prop="supervisorName" label="Supervisor" width="120" />
        <el-table-column prop="status" label="Status" width="120">
          <template #default="scope">
            <el-tag :type="getTaskStatusType(scope.row.status)">
              {{ scope.row.status }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="priority" label="Priority" width="120">
          <template #default="scope">
            <el-tag :type="getPriorityType(scope.row.priority)">
              {{ scope.row.priority || 'Medium' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="endTime" label="Due Date" width="160" />
        <el-table-column label="Actions" width="220" fixed="right">
          <template #default="scope">
            <el-button type="primary" size="small" @click="viewTaskDetails(scope.row)">
              <el-icon><View /></el-icon>Details
            </el-button>
            <el-button type="success" size="small" @click="uploadTaskFile(scope.row)">
              <el-icon><Upload /></el-icon>Upload
            </el-button>
          </template>
        </el-table-column>

        <template #empty>
          <div class="empty-data">
            <el-empty description="No tasks assigned to you yet" :image-size="120">
              <template #description>
                <p>No tasks have been assigned to you yet.</p>
                <p class="sub-text">Tasks will be assigned by the supervisor. Please wait patiently.</p>
              </template>
            </el-empty>
          </div>
        </template>
      </el-table>

      <div class="pagination-container">
        <el-pagination
            v-model:current-page="currentPage"
            v-model:page-size="pageSize"
            :page-sizes="[10, 20, 50, 100]"
            layout="total, sizes, prev, pager, next, jumper"
            :total="totalTasks"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
        />
      </div>
    </el-card>

    <!-- Task details dialog -->
    <el-dialog
        v-model="detailsDialogVisible"
        title="Task Details"
        width="60%"
        destroy-on-close
    >
      <el-descriptions
          v-if="currentTask"
          :column="2"
          border
      >
        <el-descriptions-item label="Task Title">{{ currentTask.title }}</el-descriptions-item>
        <el-descriptions-item label="Task Status">
          <el-tag :type="getTaskStatusType(currentTask.status)">
            {{ currentTask.status }}
          </el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="Supervisor">{{ currentTask.supervisorName }}</el-descriptions-item>
        <el-descriptions-item label="Priority">
          <el-tag :type="getPriorityType(currentTask.priority)">
            {{ currentTask.priority || 'Medium' }}
          </el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="Start Date">{{ currentTask.startTime || 'Not Set' }}</el-descriptions-item>
        <el-descriptions-item label="Due Date">{{ currentTask.endTime || 'Not Set' }}</el-descriptions-item>
        <el-descriptions-item label="Task Description" :span="2">
          <div class="task-description">{{ currentTask.description || 'No Description' }}</div>
        </el-descriptions-item>
      </el-descriptions>

      <!-- Task evaluation section -->
      <div v-if="currentTask && (currentTask.completed || currentTask.reviewNeeded)" class="task-evaluation-section">
        <div class="section-header">
          <h3>Supervisor Evaluation</h3>
        </div>
        <div v-loading="evaluationLoading">
          <el-empty v-if="!currentEvaluation" description="No Evaluation Yet" :image-size="80">
            <template #description>
              <p>The supervisor has not evaluated this task yet.</p>
            </template>
          </el-empty>

          <div v-else class="evaluation-container">
            <el-row :gutter="20">
              <el-col :span="8">
                <div class="score-container" :class="getScoreClass(currentEvaluation.score)">
                  <div class="score-value">{{ currentEvaluation.score }}</div>
                  <div class="score-label">Score</div>
                  <el-rate
                      v-model="currentEvaluation.score"
                      disabled
                      :max="5"
                      :colors="['#F56C6C', '#E6A23C', '#67C23A']"
                      class="score-stars"
                      text-color="#ff9900"
                      show-score
                  />
                </div>
              </el-col>
              <el-col :span="16">
                <el-card shadow="hover" class="comment-card">
                  <template #header>
                    <div class="comment-header">
                      <span>Comment</span>
                      <el-tag size="small" type="info">{{ currentEvaluation.evaluationTime }}</el-tag>
                    </div>
                  </template>
                  <div class="comment-content">
                    {{ currentEvaluation.comment || 'No comments left by the supervisor' }}
                  </div>
                  <div class="evaluator-info">
                    <el-tag size="small" type="success">Evaluator: {{ currentEvaluation.evaluatorName }}</el-tag>
                  </div>
                </el-card>
              </el-col>
            </el-row>
          </div>
        </div>
      </div>

      <!-- File upload area -->
      <div class="file-upload-section">
        <h3>Submit File</h3>
        <el-upload
            class="upload-demo"
            :action="`/api/user/tasks/${currentTask?.id}/submit`"
            :headers="uploadHeaders"
            :on-success="handleUploadSuccess"
            :on-error="handleUploadError"
            :before-upload="beforeUpload"
        >
          <el-button type="primary">Click to Upload</el-button>
          <template #tip>
            <div class="el-upload__tip">
              Supports any file type, up to 50MB
            </div>
          </template>
        </el-upload>
      </div>

      <!-- Submitted files list -->
      <div v-if="submissions.length > 0" class="submission-list">
        <h3>Submitted Files</h3>
        <el-table :data="submissions" border style="width: 100%">
          <el-table-column prop="originalFilename" label="Filename" min-width="200" />
          <el-table-column prop="fileSize" label="Size" width="120">
            <template #default="scope">
              {{ formatFileSize(scope.row.fileSize) }}
            </template>
          </el-table-column>
          <el-table-column prop="submissionTime" label="Submission Time" width="160" />
          <el-table-column label="Actions" width="180">
            <template #default="scope">
              <el-button type="primary" size="small" @click="downloadSubmission(scope.row)">
                Download
              </el-button>
              <el-button type="danger" size="small" @click="deleteSubmission(scope.row)">
                Delete
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <template #footer>
        <div class="dialog-footer">
          <el-button @click="detailsDialogVisible = false">Close</el-button>
        </div>
      </template>
    </el-dialog>

    <!-- Upload file dialog -->
    <el-dialog
        v-model="uploadDialogVisible"
        title="Upload File"
        width="50%"
        destroy-on-close
    >
      <div v-if="currentTask" class="task-info-summary">
        <p><strong>Task Title:</strong> {{ currentTask.title }}</p>
        <p>
          <strong>Status:</strong>
          <el-tag size="small" :type="getTaskStatusType(currentTask.status)">
            {{ currentTask.status }}
          </el-tag>
        </p>
        <p><strong>Due Date:</strong> {{ currentTask.endTime || 'Not Set' }}</p>
      </div>

      <div class="file-upload-section upload-centered">
        <el-upload
            class="upload-demo"
            :action="`/api/user/tasks/${currentTask?.id}/submit`"
            :headers="uploadHeaders"
            :on-success="handleUploadSuccess"
            :on-error="handleUploadError"
            :before-upload="beforeUpload"
            drag
        >
          <el-icon class="el-icon--upload"><upload-filled /></el-icon>
          <div class="el-upload__text">
            Drop files here or <em>click to upload</em>
          </div>
          <template #tip>
            <div class="el-upload__tip">
              Supports any file type, up to 50MB<br>
              <span class="error-tip" v-if="uploadError">Upload Error: {{ uploadError }}</span>
            </div>
          </template>
        </el-upload>
      </div>

      <!-- Submitted files list -->
      <div v-if="submissions.length > 0" class="submission-list">
        <h3>Submitted Files</h3>
        <el-table :data="submissions" border style="width: 100%">
          <el-table-column prop="originalFilename" label="Filename" min-width="200" />
          <el-table-column prop="fileSize" label="Size" width="120">
            <template #default="scope">
              {{ formatFileSize(scope.row.fileSize) }}
            </template>
          </el-table-column>
          <el-table-column prop="submissionTime" label="Submission Time" width="160" />
          <el-table-column label="Actions" width="180">
            <template #default="scope">
              <el-button type="primary" size="small" @click="downloadSubmission(scope.row)">
                Download
              </el-button>
              <el-button type="danger" size="small" @click="deleteSubmission(scope.row)">
                Delete
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <template #footer>
        <div class="dialog-footer">
          <el-button @click="uploadDialogVisible = false">Close</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue';
import { ElMessage, ElLoading, ElMessageBox } from 'element-plus';
import { useUserStore } from '../../stores/user';
import axios from '../../utils/axios';
import { View, Upload, UploadFilled } from '@element-plus/icons-vue';
import {
  Task,
  getMyTasks,
  getMyTasksByStatus,
  getMyTaskDetail,
  updateMyTaskStatus,
  getMyTaskEvaluation,
  type TaskEvaluation
} from '../../api/task';
import {
  TaskSubmission,
  getTaskSubmissions,
  deleteSubmission,
  submitTaskFile
} from '../../api/task';

// Data state
const tasks = ref<Task[]>([]);
const loading = ref<boolean>(false);
const searchQuery = ref<string>('');
const statusFilter = ref<string>('');
const uploadError = ref<string>('');

// Pagination settings
const currentPage = ref<number>(1);
const pageSize = ref<number>(10);
const totalTasks = ref<number>(0);

// Task details
const detailsDialogVisible = ref<boolean>(false);
const currentTask = ref<Task | null>(null);
const submissions = ref<TaskSubmission[]>([]);

// Upload file
const uploadDialogVisible = ref<boolean>(false);

// File upload related
const uploadHeaders = computed(() => {
  return {
    'Authorization': `Bearer ${localStorage.getItem('token')}`
  };
});

// Get current user ID
const currentUserId = JSON.parse(localStorage.getItem('user') || '{}').id;

// Evaluation related
const currentEvaluation = ref<TaskEvaluation | null>(null);
const evaluationLoading = ref<boolean>(false);

// Filter tasks
const filteredTasks = computed(() => {
  // First make sure to only show tasks assigned to the current user
  let result = tasks.value.filter(task => task.assigneeId === currentUserId);

  // Status filter
  if (statusFilter.value) {
    result = result.filter(task => task.status === statusFilter.value);
  }

  // Search filter
  if (searchQuery.value) {
    const query = searchQuery.value.toLowerCase();
    result = result.filter(task =>
        task.title.toLowerCase().includes(query) ||
        (task.description && task.description.toLowerCase().includes(query))
    );
  }

  // Pagination
  const start = (currentPage.value - 1) * pageSize.value;
  const end = start + pageSize.value;

  totalTasks.value = result.length;
  return result.slice(start, end);
});

// Initialize data
onMounted(() => {
  fetchTasks();
});

// Get tasks
const fetchTasks = async () => {
  loading.value = true;
  try {
    const result = statusFilter.value
        ? await getMyTasksByStatus(statusFilter.value)
        : await getMyTasks();

    tasks.value = result;
  } catch (error) {
    console.error('Failed to retrieve tasks:', error);
    ElMessage.error('Failed to retrieve tasks');
  } finally {
    loading.value = false;
  }
};

// Handle filter change
const handleFilterChange = () => {
  currentPage.value = 1;
  fetchTasks();
};

// Get task evaluation
const loadTaskEvaluation = async (taskId: number) => {
  try {
    evaluationLoading.value = true;
    const evaluation = await getMyTaskEvaluation(taskId);
    currentEvaluation.value = evaluation;
  } catch (error: any) {
    // Ignore 404 or no data errors, because the task may not have been evaluated yet
    if (!error.response || error.response.status !== 404) {
      console.error('Failed to retrieve task evaluation:', error);
    }
    currentEvaluation.value = null;
  } finally {
    evaluationLoading.value = false;
  }
};

// View task details
const viewTaskDetails = async (task: Task) => {
  try {
    loading.value = true;

    // Get detailed task information
    const detailedTask = await getMyTaskDetail(task.id);
    currentTask.value = detailedTask;

    // Get task submission records
    const taskSubmissions = await getTaskSubmissions(task.id);
    submissions.value = taskSubmissions;

    // If the task is completed, get evaluation information
    if (detailedTask.completed) {
      await loadTaskEvaluation(task.id);
    }

    detailsDialogVisible.value = true;
  } catch (error) {
    console.error('Failed to retrieve task details:', error);
    ElMessage.error('Failed to retrieve task details');
  } finally {
    loading.value = false;
  }
};

// Upload task file
const uploadTaskFile = async (task: Task) => {
  try {
    // Reset upload error and file list
    uploadError.value = '';
    submissions.value = [];

    // Get complete task details (force refresh to get the latest data)
    const taskDetail = await getMyTaskDetail(task.id);

    // Check if the task is assigned to the current user
    if (taskDetail.assigneeId !== currentUserId) {
      uploadError.value = 'This task may not be assigned to you, or the task assignment status has changed. Please contact the supervisor to confirm.';
      ElMessage.warning(uploadError.value);
      return;
    }

    currentTask.value = taskDetail;
    uploadDialogVisible.value = true;

    // Get task submission records
    const submissionResult = await getTaskSubmissions(task.id);
    submissions.value = submissionResult;

    // If the task is completed, display a prompt message but do not block the upload
    if (taskDetail.completed) {
      ElMessage.info('This task is marked as completed, but you can still upload a new file version.');
    }
  } catch (error: any) {
    console.error('Failed to retrieve task details:', error);

    if (error.response && error.response.data && error.response.data.message) {
      uploadError.value = error.response.data.message;
      ElMessage.warning(error.response.data.message);
    } else if (error.data && error.data.message === 'can not view task') {
      uploadError.value = 'You do not have permission to view this task, it may not be assigned to you';
      ElMessage.warning('You do not have permission to view this task, it may not be assigned to you');
    } else {
      uploadError.value = 'Failed to retrieve task details';
      ElMessage.error('Failed to retrieve task details');
    }
  }
};

// Handle successful upload
const handleUploadSuccess = async (response: any, file: any) => {
  uploadError.value = '';

  // Add to submission list
  submissions.value.push(response);

  // Re-get task details to get the latest status
  try {
    if (currentTask.value) {
      const updatedTask = await getMyTaskDetail(currentTask.value.id);

      // Update local task and current task
      currentTask.value = updatedTask;

      // Update task list
      const index = tasks.value.findIndex(t => t.id === updatedTask.id);
      if (index !== -1) {
        tasks.value[index] = updatedTask;
      }
    }

    // Display success message, clearly informing about the status change
    ElMessage.success('File uploaded successfully, task has been submitted and is waiting for supervisor review');
  } catch (error) {
    console.error('Failed to retrieve updated task details:', error);
    ElMessage.success('File uploaded successfully');
  }
};

// Handle failed upload
const handleUploadError = (error: any) => {
  console.error('Upload failed:', error);

  let errorMessage = 'File upload failed';

  // Try to parse detailed error information
  if (error.response) {
    console.error('Error response details:', error.response);

    // Check if the response contains detailed information
    if (error.response.data && error.response.data.message) {
      errorMessage = error.response.data.message;

      // Provide more user-friendly prompts for common errors
      if (errorMessage.includes('can not submit task')) {
        errorMessage = 'You do not have permission to submit this task. It may be because the task is not assigned to you, or the supervisor has modified the task. Please contact your supervisor to confirm the task assignment status.';
      } else if (errorMessage.includes('task missing')) {
        errorMessage = 'The task does not exist or has been deleted. Please refresh the page or contact the supervisor to confirm the task status.';
      }
    } else if (error.response.status === 400) {
      errorMessage = 'Request error (400): You may not have permission to upload files, the task ID is invalid, or the task status has changed';
    } else if (error.response.status === 401) {
      errorMessage = 'Unauthorized (401): Your login has expired, please log in again and try again';
    } else if (error.response.status === 403) {
      errorMessage = 'Forbidden (403): You do not have permission to perform this operation, please contact your supervisor';
    } else if (error.response.status === 500) {
      errorMessage = 'Server error (500): An error occurred while the server was processing the request, please try again later or contact the administrator';
    }
  } else if (error.message) {
    errorMessage = error.message;
  }

  uploadError.value = errorMessage;
  ElMessage.error(errorMessage);

  // Record detailed error information to the console for debugging purposes
  console.error('File upload error details:', {
    message: errorMessage,
    response: error.response,
    currentTask: currentTask.value ? {
      id: currentTask.value.id,
      title: currentTask.value.title,
      assigneeId: currentTask.value.assigneeId,
      supervisorId: currentTask.value.supervisorId,
      completed: currentTask.value.completed
    } : 'No task data',
    userInfo: {
      userId: currentUserId
    }
  });
};

// Handle search
const handleSearch = () => {
  currentPage.value = 1;
};

// Handle page number change
const handleCurrentChange = (page: number) => {
  currentPage.value = page;
};

// Handle page size change
const handleSizeChange = (size: number) => {
  pageSize.value = size;
  currentPage.value = 1;
};

// Format file size
const formatFileSize = (size: number) => {
  if (size < 1024) {
    return size + ' B';
  } else if (size < 1024 * 1024) {
    return (size / 1024).toFixed(2) + ' KB';
  } else {
    return (size / 1024 / 1024).toFixed(2) + ' MB';
  }
};

// Download submission file
const downloadSubmission = (submission: any) => {
  try {
    console.log('Starting to download file:', submission);

    // Get authorization token
    const token = localStorage.getItem('token');
    if (!token) {
      ElMessage.error('Authorization expired, please log in again');
      return;
    }
    
    // Show downloading tip
    const loadingInstance = ElLoading.service({
      lock: true,
      text: 'Preparing to download file...',
      background: 'rgba(0, 0, 0, 0.7)'
    });
    
    // Single reliable method using Fetch API with proper headers
    fetch(`/api/user/submissions/${submission.id}/download`, {
      method: 'GET',
      headers: {
        'Authorization': `Bearer ${token}`
      }
    })
    .then(response => {
      // Close loading animation
      loadingInstance.close();
      
      if (!response.ok) {
        if (response.status === 404) {
          throw new Error('File does not exist or has been deleted');
        } else if (response.status === 403) {
          throw new Error('You do not have permission to download this file');
        } else if (response.status === 401) {
          throw new Error('Authorization expired, please log in again');
        } else {
          throw new Error(`Download failed: ${response.status}`);
        }
      }
      
      return response.blob();
    })
    .then(blob => {
      // Create download link for the blob
      const url = window.URL.createObjectURL(blob);
      const link = document.createElement('a');
      link.href = url;
      link.download = submission.originalFilename;
      document.body.appendChild(link);
      link.click();
      window.URL.revokeObjectURL(url);
      document.body.removeChild(link);
      
      ElMessage.success('File downloaded successfully');
    })
    .catch(error => {
      loadingInstance.close();
      console.error('Failed to download file:', error);
      
      // Show user-friendly error message
      ElMessageBox.alert(
        `Failed to download file "${submission.originalFilename}": ${error.message}`, 
        'Download Error', 
        {
          confirmButtonText: 'OK',
          type: 'error'
        }
      );
    });
  } catch (error) {
    console.error('Download file operation failed:', error);
    ElMessage.error('Failed to download file');
  }
};

// Delete submission record
const deleteSubmission = async (submission: TaskSubmission) => {
  try {
    await deleteSubmission(submission.id);

    // Update submission list
    submissions.value = submissions.value.filter(s => s.id !== submission.id);

    ElMessage.success('Submission record deleted');
    
    // Retrieve current task information to update status
    if (currentTask.value && currentTask.value.id) {
      try {
        // Retrieve task details again
        const updatedTask = await getMyTaskDetail(currentTask.value.id);
        currentTask.value = updatedTask;
        
        // Update status in the task list
        const index = tasks.value.findIndex(t => t.id === updatedTask.id);
        if (index !== -1) {
          tasks.value[index] = updatedTask;
        }
        
        // Retrieve submission records again
        const taskSubmissions = await getTaskSubmissions(updatedTask.id);
        submissions.value = taskSubmissions;
        
        // If the task status becomes incomplete after deletion, clear evaluation information
        if (!updatedTask.completed) {
          currentEvaluation.value = null;
        }
      } catch (refreshError) {
        console.error('Failed to refresh task data:', refreshError);
      }
    }
  } catch (error) {
    console.error('Failed to delete submission record:', error);
    ElMessage.error('Failed to delete submission record');
  }
};

// Handle file validation before upload
const beforeUpload = (file: File) => {
  uploadError.value = '';

  if (!currentTask.value || !currentTask.value.id) {
    uploadError.value = 'Task information is incomplete, please refresh the page and try again';
    ElMessage.error(uploadError.value);
    return false;
  }

  // Check file size limit
  const isLt50M = file.size / 1024 / 1024 < 50;

  if (!isLt50M) {
    uploadError.value = 'File size cannot exceed 50MB!';
    ElMessage.error(uploadError.value);
    return false;
  }

  // Additional confirmation of task assignment status
  if (currentTask.value.assigneeId !== currentUserId) {
    uploadError.value = 'This task may not be assigned to you, please refresh the page or contact the supervisor to confirm';
    ElMessage.error(uploadError.value);
    return false;
  }

  // Note: No longer checks the task completion status, allowing students to continue uploading files to completed tasks

  return true;
};

// Helper functions
const getTaskStatusType = (status: string): 'primary' | 'success' | 'warning' | 'danger' => {
  switch (status) {
    case 'Draft': return 'primary';
    case 'Midterm': return 'warning';
    case 'Final': return 'success';
    default: return 'primary';
  }
};

const getPriorityType = (priority: string): 'primary' | 'success' | 'warning' | 'danger' => {
  switch (priority) {
    case 'High': return 'danger'; // High
    case 'Medium': return 'warning'; // Medium
    case 'Low': return 'success'; // Low
    default: return 'warning';
  }
};

// Get corresponding style class based on score
const getScoreClass = (score: number): string => {
  if (score >= 4) return 'score-excellent';
  if (score >= 3) return 'score-good';
  if (score >= 2) return 'score-average';
  return 'score-poor';
};
</script>
<style scoped>
.task-view {
  padding: 20px;
}

.box-card {
  margin-bottom: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.actions {
  display: flex;
  gap: 10px;
}

.filter-select,
.search-input {
  width: 200px;
}

.pagination-container {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}

.task-description {
  white-space: pre-wrap;
  max-height: 200px;
  overflow-y: auto;
}

.file-upload-section,
.submission-list {
  margin-top: 20px;
}

.upload-centered {
  display: flex;
  justify-content: center;
  padding: 20px 0;
}

.task-info-summary {
  margin-bottom: 20px;
  padding: 15px;
  background-color: #f5f7fa;
  border-radius: 4px;
}

h3 {
  margin-bottom: 15px;
  font-weight: 500;
  color: #303133;
}

.sub-text {
  color: #909399;
  font-size: 14px;
}

.empty-data {
  padding: 30px 0;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.task-evaluation-section {
  margin-top: 20px;
  padding: 15px;
  background-color: #f5f7fa;
  border-radius: 4px;
}

.section-header {
  margin-bottom: 15px;
  font-weight: 500;
  color: #303133;
}

.evaluation-container {
  margin-top: 15px;
}

.score-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px;
  border-radius: 8px;
  text-align: center;
  height: 100%;
  min-height: 180px;
  transition: all 0.3s;
}

.score-value {
  font-size: 48px;
  font-weight: bold;
  margin-bottom: 5px;
}

.score-label {
  font-size: 16px;
  color: #909399;
  margin-bottom: 10px;
}

.score-stars {
  margin-top: 10px;
}

.score-excellent {
  background-color: rgba(103, 194, 58, 0.1);
  border: 1px solid rgba(103, 194, 58, 0.2);
}

.score-good {
  background-color: rgba(230, 162, 60, 0.1);
  border: 1px solid rgba(230, 162, 60, 0.2);
}

.score-average {
  background-color: rgba(144, 147, 153, 0.1);
  border: 1px solid rgba(144, 147, 153, 0.2);
}

.score-poor {
  background-color: rgba(245, 108, 108, 0.1);
  border: 1px solid rgba(245, 108, 108, 0.2);
}

.comment-card {
  height: 100%;
}

.comment-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.comment-content {
  min-height: 80px;
  white-space: pre-wrap;
  line-height: 1.5;
  color: #606266;
}

.evaluator-info {
  margin-top: 15px;
  display: flex;
  justify-content: flex-end;
}
</style> 